<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <title>在线聊天室</title>
    <link rel="shortcut icon" href="./assets/img/favicon.ico"/>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./assets/style/app.css"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="//cdn.bootcss.com/angular.js/1.4.3/angular.min.js"></script>
    <script src="./assets/js/app.js"></script>

    <!-- add by wzh 20160613 测试 emoji  -->
    <!--
    <link href=" css/cover.css" rel="stylesheet">
    -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- Begin emoji-picker Stylesheets -->
    <link href="lib/css/nanoscroller.css" rel="stylesheet">
    <link href="lib/css/emoji.css" rel="stylesheet">
    <!-- End emoji-picker Stylesheets -->

    <!-- Begin emoji-picker JavaScript -->

    <script src="lib/js/nanoscroller.min.js"></script>
    <script src="lib/js/tether.min.js"></script>
    <script src="lib/js/config.js"></script>
    <script src="lib/js/util.js"></script>
    <script src="lib/js/jquery.emojiarea.js"></script>
    <script src="lib/js/emoji-picker.js"></script>

    <!-- End emoji-picker JavaScript -->

    <!-- add by wzh 20160602  -->
    <script src="./assets/angular-popups/dist/angular-popups.js"></script>
    <!-- controller -->
    <script src="./assets/js/controller/chat.ctrl.js"></script>
    <!-- directive -->
    <script src="./assets/js/directive/message.directive.js"></script>
    <script src="./assets/js/directive/user.directive.js"></script>
    <!-- service -->
    <script src="./assets/js/service/socket.service.js"></script>
    <script src="./assets/js/service/randomColor.service.js"></script>
    <script src="./assets/js/service/localStorage.service.js"></script>
    <script src="./assets/js/service/user.service.js"></script>
    <script src="./assets/js/service/IDB.service.js"></script>
</head>
<body ng-app="chatRoom" ng-controller="chatCtrl">

<!-- chat room -->
<!-- by wzh 20160602 用于挑食删除多余的 indexDB
<div>
    <button ng-click="deleteDB('chat053105_13522388251')"> 删除数据库 </button>
    <button ng-click="deleteDB('chat053106_13522388251')"> 删除数据库 </button>
    <button ng-click="deleteDB('chat053108_13522388251')"> 删除数据库 </button>
    <button ng-click="deleteDB('chat0531_13522388251')"> 删除数据库 </button>
    <button ng-click="deleteDB('chat111')"> 删除数据库 </button>

</div>
-->

<div class="chat-room-wrapper" ng-show="loginInfo.hasLogined">
    <div class="online panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">在线<span class="user-number">{{users.length-1}}</span></h3>
        </div>
        <div class="user-wrapper panel-body">
            <user iscurrentreceiver="receiver.nickname===user.nickname" info="user" ng-click="setReceiver(user)"
                  ng-repeat="user in users"></user>
        </div>
    </div>
    <div class="chat-room panel panel-success">
        <div class="panel-heading">
            <!-- 聊天区 标题 : 接收方的昵称-->
            <h3 class="panel-title">{{receiver.nickname?receiver.nickname:"群聊"}}</h3>
        </div>
        <div class="message-wrapper panel-body">
            <!-- 收到的信息全部放在 message 对象中， 同时在接收到message中，
            关联了 scollToThis ,直接滚到底
            -->
            <message self="nickname" scrolltothis="scrollToBottom()" info="message"
                     ng-repeat="message in messages"></message>
        </div>


        <div class="panel-footer">
            <!-- 以下是带表情的 input -->
            <!-- ng-model ng-disabled 不反应,说明还要ng化,准备写 directive吧 -->

            <form class="post-form form-inline " novalidate name="postform"
                  ng-submit="postMessage()">
                <input id="test111" type="text" class="form-control" ng-model="words"
                       placeholder="说点什么呗" required
                       data-emojiable="true" >
                <button type="submit" class="btn btn-success" >发送
                </button>
            </form>

<!-- 以下是不带表情的 input
            <form class="post-form form-inline" novalidate name="postform" ng-submit="postMessage()">
                <input type="text" class="form-control" ng-model="words" placeholder="{{myPlaceHoder}}" required>
                <button type="submit" class="btn btn-success" ng-disabled="postform.$invalid || disconnected ">发送
                </button>
            </form>
-->
        </div>
    </div>
</div>

<!-- end of chat room -->

<!-- login form -->
<div class="userform-wrapper" ng-show="!loginInfo.hasLogined">
    <form class="form-inline login" novalidate name="userform" ng-submit="login()">
        <div class="form-group">
            <label for="nickname" class="sr-only"></label>
            <div class="input-group">
                <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                <input type="text" class="form-control" id="nickname" placeholder="Your Nickname" ng-model="nickname"
                       required/>
            </div>
        </div>
        <button type="submit" class="btn btn-primary" ng-disabled="userform.$invalid">LOG IN</button>
        <p ng-show="userExisted" class="help-block">用户名错误或者已经登陆.</p>

    </form>
</div>
<!-- end of login form -->

<script>
    $(function () {
        // Initializes and creates emoji set from sprite sheet
        window.emojiPicker = new EmojiPicker({
            emojiable_selector: '[data-emojiable=true]',
            assetsPath: 'lib/img/',
            popupButtonClasses: 'fa fa-smile-o'
        });
        // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
        // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
        // It can be called as many times as necessary; previously converted input fields will not be converted again
        window.emojiPicker.discover();
    });
</script>


</body>
</html>
